<template>
  <div ref="appPiesms" style="width: 100%;height: 530px;"></div>
</template>

<script>
import * as echarts from "echarts";
import { parseTime } from '@/utils/index'

export default {
  name: "appPieBox",
  props:['appList'],
  data() {
    return {};
  },
  mounted() {
  },
  created(){
    setTimeout(() =>{
      this.initChart();
    },1000)
  },
  watch: {
    appList: function (newVal, oldVal) {
      this.initChart();
    },
  },
  methods: {
    formateDate(date){
      return parseTime(date)
    },
    initChart() {
      let that = this;
      //   console.log('--',this.appList)
      //   this.appList.forEach(item => {
      //   item.value = 10;
      // });
      var chartDom = this.$refs.appPiesms;
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        dataset: {
          source: this.appList,
        },
        title: {
          text: this.$t('analyze.smsAppName'),
          left: "20px",
          top: "20px",
        },
        tooltip: {
              trigger: "item",
              position: [10, 10], 
              formatter: function(params) {
              // params 包含了 tooltip 的所有信息
              // params.seriesName: 系列的名称
              // params.name: 数据项的名称
              // params.value: 数据项的值
              // 内容：${params.data.content}<br/>
              // <br/> 时间:${that.formateDate(params.data.infoTime)}
              return `${$t('analyze.appname')}：${params.name}<br/>${$t('analyze.phone')}：${params.data.phone}`;
          }
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          show: true, // 将show设置为false关闭legend
          data: this.appList.map(item => item.app_name),
        },
        series: [
          {
            name: "APP",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            encode: {
              itemName: 'app_name',
              value: 'cnt'
            },
            labelLine: {
              length: 30// 根据需要调整指示线的长度
            },
            label: {
              distance: 5 // 根据需要调整标签与图形元素之间的距离
            },
          },
        ],
      };

      option && myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
},

  },
};
</script>

<style>
</style>